<template>
    <div>
        <!-- 专利信息 -->
        <div class="m-from">
            <div class="from-title">
                <div class="tit-left">专利信息</div>
                <div class="tit-right">
                    <button class="add"><span><img src="../../../../static/images/add.png" alt=""></span>新增</button>
                    <button class="out"><span><img src="../../../../static/images/out.png" alt=""></span>导出</button>
                </div>
            </div>
            <div class="from-table">
                <table border="1">
                    <tr>
                        <th>序号</th>
                        <th>类别</th>
                        <th>申请号</th>
                        <th>状态</th>
                        <th>名称</th>
                        <th>申请人</th>
                        <th>授权日</th>
                        <th>缴费截止日</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in tableData" :key="index">
                        <td>{{item.num}}</td>
                        <td>
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    {{item.type}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item @click.native="patent_type(index,'发明专利')">发明专利</el-dropdown-item>
                                    <el-dropdown-item @click.native="patent_type(index,'外观专利')">外观专利</el-dropdown-item>
                                    <el-dropdown-item @click.native="patent_type(index,'实用新型专利')">实用新型专利</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </td>
                        <td>{{item.appNum}}</td>
                        <td>
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    {{item.state}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item @click.native="patent_state(index,'有权')">有权</el-dropdown-item>
                                    <el-dropdown-item @click.native="patent_state(index,'无权')">无权</el-dropdown-item>
                                    <el-dropdown-item @click.native="patent_state(index,'申请中')">申请中</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.pensor}}</td>
                        <td>{{item.authDate}}</td>
                        <td>{{item.EndDate}}</td>
                        <td class="edit">{{item.edit}}</td>

                    </tr>
                </table>
            </div>
        </div>
        <!-- 软件著作权 -->
        <div class="m-from">
            <div class="from-title">
                <div class="tit-left">软件著作权</div>
                <div class="tit-right">
                    <button class="add"><span><img src="../../../../static/images/add.png" alt=""></span>新增</button>
                    <button class="out"><span><img src="../../../../static/images/out.png" alt=""></span>导出</button>
                </div>
            </div>
            <div class="from-table">
                <table border="1">
                    <tr>
                        <th>序号</th>
                        <th>软件名称</th>
                        <th>版本号</th>
                        <th>发布日期</th>
                        <th>软件简称</th>
                        <th>登记号</th>
                        <th>登记批准日期</th>
                    </tr>
                    <tr v-for="(item,index) in Software_data" :key="index">
                        <td>{{item.num}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.edition}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.abbreviat}}</td>
                        <td>{{item.registration}}</td>
                        <td>{{item.registrationDate}}</td>
                    </tr>
                </table>
            </div>
        </div>


        <div class="m-from">
            <div class="from-title">
                <div class="tit-left">商标信息</div>
                <div class="tit-right">
                    <button class="add"><span><img src="../../../../static/images/add.png" alt=""></span>新增</button>
                    <button class="out"><span><img src="../../../../static/images/out.png" alt=""></span>导出</button>
                </div>
            </div>
            <div class="from-table">
                <table border="1">
                    <tr>
                        <th>序号</th>
                        <th>商标</th>
                        <th>商标名</th>
                        <th>状态</th>
                        <th>申请时间</th>
                        <th>注册号</th>
                        <th>国际分类</th>
                        <th>内容</th>
                    </tr>
                    <tr v-for="(item,index) in trademark_data" :key="index">
                        <td>{{item.num}}</td>
                        <td>{{item.trademark}}</td>
                        <td>{{item.trademarkName}}</td>
                        <td>{{item.state}}</td>
                        <td>{{item.time}}</td>
                        <td>{{item.registration}}</td>
                        <td>{{item.type}}</td>
                        <td class="edit">{{item.cont}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData: [//专利信息
                {
                    num:'01',
                    type: '发明专利',
                    appNum:'HJ23572',
                    state:'有权',
                    name:'厦门有限公司',
                    pensor: '某某某',
                    authDate:'2019-04-22',
                    EndDate:'2020-04-22',
                    edit: '申请代缴年费'
                },
                {
                    num:'02',
                    type: '发明专利',
                    appNum:'HJ23572',
                    state:'有权',
                    name:'厦门有限公司',
                    pensor: '某某某',
                    authDate:'2019-04-22',
                    EndDate:'2020-04-22',
                    edit: '申请代缴年费'
                },
                {
                    num:'03',
                    type: '发明专利',
                    appNum:'HJ23572',
                    state:'有权',
                    name:'厦门有限公司',
                    pensor: '某某某',
                    authDate:'2019-04-22',
                    EndDate:'2020-04-22',
                    edit: '申请代缴年费'
                },
            ],
            Software_data:[//软件著作权
                {
                    num:'01',
                    name:'HJ23572',
                    edition:'HJ23572',
                    date:'2019-04-22',
                    abbreviat:'某某某',
                    registration:'HJ23572',
                    registrationDate:'2019-04-22',
                },
                {
                    num:'02',
                    name:'HJ23572',
                    edition:'HJ23572',
                    date:'2019-04-22',
                    abbreviat:'某某某',
                    registration:'HJ23572',
                    registrationDate:'2019-04-22',
                },
                {
                    num:'03',
                    name:'HJ23572',
                    edition:'HJ23572',
                    date:'2019-04-22',
                    abbreviat:'某某某',
                    registration:'HJ23572',
                    registrationDate:'2019-04-22',
                },
            ],
            trademark_data:[//商标信息
                {
                    num:'01',
                    trademark:'HJ23572',
                    trademarkName:'HJ23572',
                    state:'商标申请-等待 驳回复审-结束',
                    time:'2019-04-12',
                    registration:'HJ23572',
                    type:'9-科学仪器',
                    cont:'查看详情',
                }
            ]
        }
    },
    methods:{
        patent_type(index,type){//专利信息 类型选择
            var tableData = this.tableData;
            tableData[index].type = type;
            this.tableData = tableData;
        },
        patent_state(index,state){
            var tableData = this.tableData;
            tableData[index].state = state;
            this.tableData = tableData;
        }
    }
}
</script>
<style lang="less" scoped>
    button{
        border:none;
        background: none;
    }
    .m-from{
        font-family:MicrosoftYaHei;
        font-weight:400;
        padding: 55px 15px 0;
        background: #fff;
        .from-title{
            height: 40px;
            line-height: 40px;
            .tit-left{
                display: inline-block;
                padding-left: 40px;
                position: relative;
                font-size: 24px;
                color: #333;
                &::before{
                    content: '';
                    height: 100%;
                    position: absolute;
                    width: 8px;
                    background: #1575F9;
                    left: 0;
                }
            }
            .tit-right{
                float: right;
                &>button{
                    width: 98px;
                    height: 36px;
                    border-radius: 4px;
                    line-height: 36px;
                    color: #fff;
                    font-size: 16px;
                    margin-left: 15px;
                    &.add{
                        background:linear-gradient(0deg,rgba(2,98,255,1) 0%,rgba(73,206,255,1) 100%);
                    }
                    &.out{
                        background:linear-gradient(0deg,#189200 0%,#1A9D00 100%);
                    }
                    &>span{
                        display: inline-block;
                        height: 20px;
                        margin-right: 5px;
                        img{
                            height: 100%;
                            vertical-align: none;
                        }
                    }
                }
            }
        }
        .from-table{
            margin-top: 30px;
            &>table{
                border-color: #CCCCCC;
                width: 100%;
                text-align: center;
                border:none;
                tr{
                    th{
                        height: 50px;
                        line-height: 50px;
                        font-size: 16px;
                        color: #333;
                    }
                    td{
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;
                        color: #666;
                        &.edit{
                            color: #1575F9;
                        }
                    }
                }
            }
        }
    }
</style>
